<template>
  <div class="fo-wrapper">
    <div>
      <!-- 顶部 -->
      <div class="user-top">
        <!-- 第一行 -->
        <div class="user-top__select">
          <span>
            <label class="user-label-long">组织机构:</label>
            <el-select placeholder="请选择" class="user-input__long"></el-select>
          </span>
          <span>
            <label>角色:</label>
            <el-select placeholder="请选择"></el-select>
          </span>
          <span>
            <label>状态:</label>
            <el-select placeholder="请选择"></el-select>
          </span>
        </div>
        <!-- 第二行 -->
        <div class="user-top__search">
          <div>
            <label class="user-label-long"><i>搜索</i>:</label>
            <el-input placeholder="请选择" class="user-input__long"></el-input>
            <el-button class="user-top__btn">搜索</el-button>
          </div>
          <el-button>新增用户</el-button>
        </div>
      </div>
      <!-- 表格 -->
      <div class="user-table">
        <el-table
          style="width: 100%">
          <el-table-column
            fixed
            prop="date"
            label="姓名"
            width="150">
          </el-table-column>
          <el-table-column
            prop="name"
            label="手机号"
            width="120">
          </el-table-column>
          <el-table-column
            prop="province"
            label="用户民"
            width="120">
          </el-table-column>
          <el-table-column
            prop="city"
            label="所属机构">
          </el-table-column>
          <el-table-column
            prop="address"
            label="角色"
            width="300">
          </el-table-column>
          <el-table-column
            prop="zip"
            label="状态"
            width="120">
          </el-table-column>
          <el-table-column
            prop="zip"
            label="操作"
            width="120">
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="user-pagenum">

      </div>
    </div>
  </div>
</template>
<script>

</script>
<style lang="scss" scoped>
.fo-wrapper {
  padding: 20px;
  background: #eee;
  border: 1px solid #ddd;
  font-size: 13px;
  > div {
    background: #fff;
    padding: 36px 25px; 
  }
}
.user-top {
  > div {
    > span {
      margin-right: 40px;
    }
    label {
      font-weight: 400;
      &.user-label-long {
        display: inline-block;
        width: 56px;
        i {
          font-style: normal;
          width: 40px;
        }
      }
    }
    .user-input__long {
      width: 230px;
    }
    .user-search__input {
      width: 230px;
    }
  }
  .user-top__select{
    margin-bottom: 17px;
  }
  .user-top__search {
    display: flex;
    justify-content: space-between;
    .user-top__btn {
      margin-left: 15px;
    }
  }
}
.user-table {
  margin-top: 30px;
}
</style>

